<template>
  <div class="register">
    <div class="logo">
      <img src="static/images/guide-img/12.png" alt=""/>
    </div>
    <div class="inputDiv">
      <div class="register-user">
        <div>
          <img src="static/images/guide-img/person.png" alt=""/>
        </div>
        <input type="text" id="usernumber"  class="myuser" placeholder="PLEASE INPUT YOUR PHONE NUMBER"  @blur="myuser"/>
      </div>
      <div class="myerrDiv">
         <div class="myerr" v-show="isshow">Please input right phone number!</div>
      </div>
      <div class="register-user">
        <div>
          <img src="static/images/guide-img/key.png"  alt=""/>
        </div>
        <input  type="password" id="password"/>
      </div>
    </div>
    <div class="TestGetCodeDiv">
      <div class="TestGetCode">
        GetCode
      </div>
      <input  type="password" id="TestGetCode"/>
    </div>
    <div class="clickLogin">
      <div>
        <img src="static/images/guide-img/boast.png" alt=""/>
      </div>
      <div class="loginart">
        <div @click="register">REGISTER</div>
        <router-link to="/login" class="returnlogin">LOGIN</router-link>
      </div>
    </div>
    <div class="myfooter">
      <div>
        By logging in you agree to
      </div>
      <div class="myfooterAd">
        <div>
          privacy policy
        </div>
        <div>&</div>
        <div>
          terms of service
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import $ from 'jquery'
    export default{
      name:'register',
      data: function(){
        return {
          'isshow': false,
          $:$,
          userArr:[],
          user:{
            username:'',
            password:''
          }
        }
      },
      methods:{
        myuser: function(e){
          var my= e.target.value;
          var mystandard=/^0?(13|14|15|18)[0-9]{9}?$/;
          let isStandard=mystandard.test(my);
          if(isStandard){
            this.isshow= false
          }else{
            this.isshow=true
          }
        },
        register:function(){
          let username=document.getElementById("usernumber").value;
          let password=document.getElementById("password").value;
          if(username!=''&&password!=""){
            this.user.username=username;
            this.user.password=password;
            this.userArr.push(this.user);
            this.$router.push("/login");
          }
        }

      }
    }
</script>
<style scoped>
  .register{
    margin-top: -40px;
    margin-bottom: 0;
    background-image: url("../../static/images/guide-img/15.png");
    background-size: cover;
    background-position: 0 -90px ;
    padding-top: 80px;
    padding-bottom:30px;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .register .inputDiv{
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 20px 0;
  }
  .register>.logo img{
    width: 150px;
    height:150px;
  }
  .register-user{
    width: 80%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    /*border: 1px solid black;*/
  }
  .register-user>div{
    margin: 10px 0;
  }
  .register-user img{
    width: 20px;
    height: 20px;
  }
  .register-user input,.TestGetCodeDiv input{
    width: 80%;
    height: 20px;
    line-height: 12px;
    background-color: transparent;
    border: none;
    border-bottom: 1px solid #B4B4B5;
    margin-left: 5px;
    font-size: 12px;
    color: #767677;
    letter-spacing: 0;
    outline: none;
  }
  .TestGetCodeDiv input{
    width: 100%;
    border: 1px solid #F0907F;
    outline: none;
    border-radius: 0;
    height: 25px;
    line-height: 60px;
    font-size: 16px;
  }
  .TestGetCodeDiv{
    width: 60%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  ::-webkit-input-placeholder { /* WebKit browsers */
      font-size: 12px;
  }
  .register-user>div{
    margin-right: 10px;
  }
  .TestGetCode{
    padding: 6px;
    border: 2px solid #F0907F;
    font-size: 12px;
    color: #fff ;
    background: #F0907F;
  }
  #TestGetCode{
    width: 20%;
  }
  .clickLogin img{
    width: 20px;
    height: 20px;
    margin-right: 20px;
  }
  .clickLogin{
    margin-top: 30px;
    width: 45%;
    display: flex;
    flex-direction: row;
  }
  .loginart{
    display: flex;
    flex-direction: column;
    align-items:  flex-start;
  }
  .loginart>div:nth-child(1){
    font-size:14px;
    color: #F0907F;
  }
  .returnlogin{
    color: #F0907F;
    font-size: 12px;
    margin-top: 20px;
    text-decoration: none;
  }
  .myfooter{
    margin-top: 60px;
    color: white;
    font-size: 10px;
  }
  .myfooterAd{
    display: flex;
    flex-direction: row;
  }
  .myfooterAd>div:nth-child(1){
    border-bottom: 1px solid white;
    margin-right: 10px;
    padding-bottom: 5px;
  }
  .myfooterAd>div:nth-child(3){
    border-bottom: 1px solid white;
    margin-left: 10px;
    padding-bottom: 5px;
  }
  .myerr{
    font-size: 12px;
    color: red;
    /*padding-top: 5px;*/
  }
  .myerrDiv{
    height: 14px;
  }
</style>
